<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false"
  [nzTitle]="studentCourseGrade.id ? '学生课程成绩详情' : '批改学生课程成绩信息'" (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter"
  nzWidth="1200">

  <form nz-form [formGroup]="validateForm" #myForm="ngForm">
    <div nz-row [nzGutter]="16">
      <b style="color: red;">基本信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>学生学号</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.studentCode }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>学生姓名</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.studentName }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>学院名称</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.academyName }}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>行政班级</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.className }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="year" nzRequired>学年</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.year + ' - ' + studentCourseGrade?.nextYear + '学年' }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>学期</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.termType === 'LAST_TERM' ? '第一学期' : '第二学期' }}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>


    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzRequired [nzSpan]="10">是否批改</nz-form-label>
          <nz-form-control nz-col [nzSpan]="14">
            {{ studentCourseGrade?.isCorrect ? '已批改' : '未批改'}}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <b style="color: red;">课程基本信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzRequired [nzSpan]="10">课程编号</nz-form-label>
          <nz-form-control nz-col [nzSpan]="14">
            {{ studentCourseGrade?.courseCode }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzRequired [nzSpan]="10">课程名称</nz-form-label>
          <nz-form-control nz-col [nzSpan]="14">
            {{ studentCourseGrade?.courseName }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>课程类别</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.courseType }}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>课程学分</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.credit }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzRequired [nzSpan]="10">考核方式</nz-form-label>
          <nz-form-control nz-col [nzSpan]="14">
            {{ studentCourseGrade?.evaluationMode }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>修读性质</nz-form-label>
          <nz-form-control [nzSpan]="14">
            {{ studentCourseGrade?.property }}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <b style="color: red;">{{ studentCourseGrade?.isCorrect ? '成绩信息' : '成绩录入'}}</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="grade" nzRequired>成绩</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="gradeErrorTpl">
            <ng-container *ngIf="studentCourseGrade.evaluationMode === '考试'">
              <nz-input-number [(ngModel)]="studentCourseGrade.grade" [nzMin]="0" [nzStep]="0.1" formControlName="grade"
                placeholder="成绩" *ngIf="!isPreView; else gradeTemp"
                (ngModelChange)="calculateGradePoint(studentCourseGrade, true)"></nz-input-number>
            </ng-container>
            <ng-container *ngIf="studentCourseGrade.evaluationMode === '考查'">
              <nz-select [(ngModel)]="studentCourseGrade.grade" formControlName="grade" nzAllowClear
                nzPlaceHolder="选择成绩" *ngIf="!isPreView; else gradeTemp"
                (ngModelChange)="calculateGradePoint(studentCourseGrade, false)">
                <nz-option nzValue="优秀" nzLabel="优秀"></nz-option>
                <nz-option nzValue="良好" nzLabel="良好"></nz-option>
                <nz-option nzValue="中等" nzLabel="中等"></nz-option>
                <nz-option nzValue="及格" nzLabel="及格"></nz-option>
                <nz-option nzValue="不及格" nzLabel="不及格"></nz-option>
              </nz-select>
            </ng-container>
            <ng-template #gradeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入成绩!
              </ng-container>
            </ng-template>
            <ng-template #gradeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ studentCourseGrade?.grade }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="getCredit" nzRequired>取得学分</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="getCreditErrorTpl">
            <nz-input-number [(ngModel)]="studentCourseGrade.getCredit" [nzMin]="0" [nzMax]="studentCourseGrade.credit"
              [nzStep]="0.01" (ngModelChange)="calculationCreditGradePoint()" formControlName="getCredit"
              placeholder="取得学分" *ngIf="!isPreView; else getCreditTemp"></nz-input-number>
            <ng-template #getCreditErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入取得学分!
              </ng-container>
            </ng-template>
            <ng-template #getCreditTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ studentCourseGrade?.getCredit }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="gradePoint" nzRequired>取得绩点</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="gradePointErrorTpl">
            <nz-input-number [(ngModel)]="studentCourseGrade.gradePoint" [nzMin]="0" [nzStep]="0.01"
              (ngModelChange)="calculationCreditGradePoint()" formControlName="gradePoint" placeholder="取得绩点"
              *ngIf="!isPreView; else getCreditTemp" [nzDisabled]="true"></nz-input-number>
            <ng-template #gradePointErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入取得绩点!
              </ng-container>
            </ng-template>
            <ng-template #gradePointTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ studentCourseGrade?.gradePoint }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="creditGradePoint" nzRequired>学分绩点</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <input nz-input formControlName="creditGradePoint" [ngModel]="studentCourseGrade.creditGradePoint"
              placeholder="自动计算" *ngIf="!isPreView; else creditGradePointTemp">
            <ng-template #creditGradePointTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ studentCourseGrade?.creditGradePoint }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="13">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="6" nzFor="remark">备注</nz-form-label>
          <nz-form-control [nzSpan]="19" nzHasFeedback>
            <textarea nz-input placeholder="备注(500字以内)" formControlName="remark"
              [nzAutosize]="{ minRows: 4, maxRows: 10 }" maxlength="500" rows="4"
              [(ngModel)]="studentCourseGrade.remark" *ngIf="!isPreView; else remarkTemp"></textarea>
            <ng-template #remarkTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ studentCourseGrade?.remark }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

  <ng-template #detailFooter>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
